<template>
  <div class="app-container">
    <el-container style="border: 1px solid #eee">
      <el-header class="el-header" style="height: 60px;">

        <div style="margin-top: 15px;">
          <el-input v-model="query" placeholder="输入图片地址进行搜索" class="input-with-select" @keyup.enter.native="onSubmit">
            <el-select slot="prepend" v-model="select" placeholder="请选择">
              <el-option label="所有" value="-1" />
              <el-option v-for="(web,index) in webs" :key="index" :label="web.domain" :value="web.id" />
            </el-select>
            <el-tooltip v-if="query.length" slot="suffix" class="item" effect="light" placement="right">
              <div slot="content"><img :src="query" width="320"></div>
              <i class="el-input__icon el-icon-view" />
            </el-tooltip>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          </el-input>
        </div>

      </el-header>
      <el-main v-loading="loading">
        <el-card
          v-for="(item,index) in tableData"
          :key="item.id"
          :body-style="{ padding: '0px' }"
          style="padding: 15px;width: 320px;height:900px;float: left;"
        >
          <img :src="item.image" class="image" width="300">
          <div style="padding: 14px;">
            <span style="text-align:center;color: #df1d3f">{{ Math.ceil(item.score*100) }}%</span>
            <hr>
            <span>{{ item.name }}</span>
            <hr>
            <span>{{ item.meta_description }}</span>
            <hr>
            <span>{{ item.price }}</span>
            <hr>
            <span>{{ item.url }}</span>
            <div class="bottom clearfix">

              <el-button type="text" class="button">复制产品</el-button>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { GetWebs, SearchSimilarFromBaidu } from '@/api/erp/crawlproduct'

export default {
  data() {
    return {
      query: '',
      select: '-1',
      webs: [],
      tableData: [],
      loading: false,
      currentDate: new Date()

    }
  },
  computed: {
    targetimg: function() {
      return this.$route.query.targetimg
    }
  },
  created() {
    GetWebs().then((response) => {
      this.webs = response.data
    })
    if (this.targetimg) {
      this.query = this.targetimg
      if (this.query.length) {
        this.onSubmit()
      }
    }
  },
  methods: {
    onSubmit() {
      this.loading = true
      SearchSimilarFromBaidu(JSON.stringify({ web: this.select, imgurl: this.query })).then((response) => {
        this.loading = false
        this.tableData = response.data
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
  .app-container >>> .el-select .el-input {
    width: 130px;
  }

  .app-container >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .app-container >>> .text {
    font-size: 14px;
  }

  .app-container >>> .text p.title {
    font-weight: bold;
    font-weight: 600;
  }

  .app-container >>> .text p.desc {
    font-size: 10px;
  }

  .app-container >>> .text em {
    color: red;
  }

  .app-container >>> .text span.a {
    color: #3A7734;
  }

  .app-container >>> .item {
    margin-bottom: 1px;
  }

  .app-container >>> .clearfix:before,
  .app-container >>> .clearfix:after {
    display: table;
    content: "";
  }

  .app-container >>> .clearfix:after {
    clear: both
  }

  .app-container >>> .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .app-container >>> .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .app-container >>> .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
